<template>
	<view v-if="isLoad">
		<!-- 最新资讯 -->
	<view class="cu-bar bg-white margin-top-xs" style="margin-bottom: 3rpx;" v-if="!appIsAudit">
		<view class="action sub-title">
			<text class="text-xl text-bold text-blue text-shadow">最新资讯</text>
			<text class="text-ABC text-blue">News</text>
		</view>
		<view class="action more-btn-container" @tap="viewMore">
			<view class="modern-more-btn">
				<text class="more-text">更多</text>
				<text class="cuIcon-right more-icon"></text>
			</view>
		</view>
	</view>

	<!-- 文章列表 -->
	<view class="cu-card article no-card solid-bottom" @tap="onArticleTap(item)"
		v-for="(item, index) in internalArticleList" :key="index">
		<view class="cu-item shadow">
			<view class="content">
				<view>
					<image :src="item.thumb" mode="aspectFit" class="radius"
						style="height: 120rpx;width: 120rpx;">
					</image>
				</view>
				<view class="desc" style="justify-content: space-around;margin-left: 10rpx;">
					<view class="text-black text-df">{{ item.title }}</view>
					<view class="flex justify-between">
						<view class="text-gray text-sm">{{ item.cate_name }} · {{ item.create_date }}</view>
						<view class="text-gray text-sm padding-right text-shadow">{{ item.page_view }} 阅读
						</view>
					</view>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
import { navigateByLinkType } from '@/common/js/util.js';

export default {
	name: 'IndexArticleList',
	data() {
		return {
			internalArticleList: [], // 内部文章列表数据
			isLoad: true // 加载状态，初始为true以确保组件能够渲染
		};
	},

	created() {
		console.log('IndexArticleList组件created钩子执行');
		try {
			const app = (typeof getApp === 'function') ? getApp() : null;
			this.__app__ = app;
			this.__service__ = app && app.globalData ? app.globalData.service : null;
			console.log('IndexArticleList created: app/service available?', !!this.__app__, !!this.__service__);
		} catch (e) {
			console.error('IndexArticleList 获取 app 或 service 失败:', e);
		}
		// 组件创建时获取文章列表数据
		this.getArticleList();
	},
	mounted() {
		console.log('IndexArticleList组件mounted钩子执行');
	},
	methods: {
		/**
		 * 获取文章列表数据
		 */
		async getArticleList() {
			try {
				const service = this.__service__ || ((typeof getApp === 'function' && getApp().globalData) ? getApp().globalData.service : null);
				if (!service || !service.getArticleList) {
					console.error('IndexArticleList: service.getArticleList 不可用，跳过请求', service);
					this.isLoad = true;
					return;
				}
				let req = {
					page: 1,
					cate_id: 0 // 获取所有分类的文章
				};
				let response = await service.getArticleList(req);
				this.internalArticleList = response.data || [];
				console.log('获取文章列表成功:', this.internalArticleList);
			} catch (error) {
				console.error('获取文章列表失败:', error);
				this.internalArticleList = [];
			} finally {
				this.isLoad = true;
			}
		},

		/**
		 * 处理文章点击事件
		 * @param {Object} item 文章项
		 */
		onArticleTap(item) {
			// 使用封装的工具函数处理链接类型跳转
			if (item.url) {
				console.log('文章点击事件:', item);
				// 使用url_type作为链接类型参数，如果没有则默认为1（小程序）
				const urlType = item.url_type || 1;
				navigateByLinkType(urlType, item.url);
			} else if (item.id) {
				// 如果没有URL，跳转到文章详情页
				console.log('没有URL，跳转到文章详情页:', item);
				uni.navigateTo({
					url: `/pages/index/article/detail?id=${item.id}`
				});
			} else {
				console.error('文章数据缺少必要字段:', item);
			}
		},

		/**
		 * 查看更多文章
		 */
		viewMore() {
			uni.navigateTo({
				url: '/pages/index/article/list'
			});
		}
	}
};
</script>

<style src="./index-article-list.css"></style>